<template>
  <div class="je-issue">
    <je-form
      ref="formRef"
      :model="modelRef"
      :style="{ width: '1024px', margin: '0 auto' }"
      :label-col="{ style: { width: '100px' } }"
      :wrapper-col="{ span: 24 }"
      autocomplete="off"
      label-align="right"
      :colon="false"
    >
      <div class="first-line">
        <je-form-item label="提出人" v-bind="validateInfos.userName">
          <je-input
            v-model:value.trim="modelRef.userName"
            :disabled="btnDisabled"
            class="my-input"
          />
        </je-form-item>
        <je-form-item label="公司名称" class="tail" v-bind="validateInfos.customerName">
          <je-input
            v-model:value.trim="modelRef.customerName"
            :disabled="btnDisabled"
            class="my-input"
          />
        </je-form-item>
      </div>
      <div class="second-line">
        <je-form-item label="手机号" v-bind="validateInfos.phone">
          <je-input v-model:value="modelRef.phone" :disabled="btnDisabled" min="0" class="my-input">
          </je-input>
        </je-form-item>
        <je-form-item label="验证码" class="tail" v-bind="validateInfos.code">
          <je-input
            v-model:value="modelRef.code"
            :disabled="btnDisabled"
            maxlength="6"
            min="0"
            class="my-input"
            :allow-clear="false"
          >
          </je-input>
          <je-button
            v-if="times === 60"
            :disabled="btnDisabled"
            type="link"
            :loading="loading"
            class="btn"
            @click="sendNote"
            >获取验证码</je-button
          >
          <span v-else class="times">{{ times }} s</span>
        </je-form-item>
      </div>

      <je-form-item label="浏览器">
        <je-select
          v-model:value="modelRef.browserCode"
          :disabled="btnDisabled"
          :allow-clear="false"
          :default-value="modelRef.browserCode"
          :options="selectList"
          class="my-input"
        >
        </je-select>
      </je-form-item>
      <je-form-item label="问题标题" v-bind="validateInfos.title">
        <je-input v-model:value.trim="modelRef.title" :disabled="btnDisabled" />
      </je-form-item>
      <je-form-item label="问题描述" v-bind="validateInfos.description">
        <je-editor-html
          ref="editor"
          v-model:value="modelRef.description"
          style="height: 290px"
          :disabled="btnDisabled"
        />
      </je-form-item>
      <je-form-item label="复现步骤" v-bind="validateInfos.repetition">
        <je-textArea
          v-model:value.trim="modelRef.repetition"
          :disabled="btnDisabled"
          style="height: 180px"
        />
      </je-form-item>
      <!-- <je-form-item label="问题附件">
        <je-Upload
          v-model:value="modelRef.accessory"
          :disabled="btnDisabled"
          :allow-clear="true"
          class="myInput"
        >
        </je-Upload>
      </je-form-item> -->
    </je-form>
    <div class="footer">
      <je-button v-if="!btnDisabled" type="primary" style="margin-right: 10px" @click="onSubmit"
        >提交</je-button
      >
      <je-button @click="cancel">关闭</je-button>
    </div>
  </div>
</template>
<script>
  import { defineComponent, reactive, ref } from 'vue';

  import { Form, Input, Select, EditorHtml, Button, Modal } from '@jecloud/ui';

  import { saveFeedbackApi, sendCodeApi } from '@/api';

  const useForm = Form.useForm;

  export default defineComponent({
    name: 'JeIssue',
    components: {
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeSelect: Select,
      // JeUpload: Upload,
      JeEditorHtml: EditorHtml,
      JeTextArea: Input.TextArea,
      JeButton: Button,
    },
    props: {
      selfModel: String,
    },
    setup(props) {
      // 表单数据
      const modelRef = ref({
        userName: '',
        customerName: '',
        phone: '',
        code: '',
        browserCode: 'chrome',
        title: '',
        description: '',
        repetition: '',
        // accessory: '',
      });
      // 浏览器下拉选项
      const selectList = [
        { label: 'Chrome ', value: 'chrome' },
        { label: 'IE系列', value: 'IE' },
        { label: 'IE9', value: 'IE9' },
        { label: 'IE10', value: 'IE10' },
        { label: 'IE11', value: 'IE11' },
        { label: 'Firefox', value: 'firefox' },
        { label: 'Safari ', value: 'safari' },
        { label: '360极速', value: '360JS' },
        { label: '360安全', value: '360AQ' },
        { label: '酷狗浏览器', value: 'kugoo' },
        { label: '百度浏览器', value: 'baidu' },
      ];

      // 校验规则
      const rulesRef = reactive({
        userName: [{ required: true, message: '该输入项为必填项' }],
        customerName: [{ required: true, message: '该输入项为必填项' }],
        phone: [
          { required: true, message: '该输入项为必填项' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '手机号码格式不正确',
          },
        ],
        code: [
          { required: true, message: '该输入项为必填项' },
          {
            pattern: /^\d+$/,
            message: '验证码不正确',
          },
        ],
        title: [{ required: true, message: '该输入项为必填项' }],
        description: [{ required: true, message: '该输入项为必填项' }],
        repetition: [{ required: true, message: '该输入项为必填项' }],
      });
      const { validate, validateInfos } = useForm(modelRef, rulesRef, {
        // onValidate: (...args) => console.log(...args),
      });
      // 提交验证
      const btnDisabled = ref(false); // 提价成功后置灰
      const onSubmit = () => {
        validate()
          .then(() => {
            saveFeedbackApi({ ...modelRef.value })
              .then((res) => {
                Modal.notice(res.data, 'success');
                btnDisabled.value = true;
              })
              .catch((err) => {
                Modal.alert(err.data, 'error');
              });
          })
          .catch(() => {});
      };

      // 富文本
      const editorRef = ref();

      // 发送短信
      const formRef = ref();
      const loading = ref(false);
      const sendNote = () => {
        validate(['phone', 'userName'])
          .then(() => {
            loading.value = true;
            sendCodeApi({ phone: modelRef.value.phone, userName: modelRef.value.userName })
              .then((res) => {
                Modal.notice(res.data, 'success');
                loading.value = false;
                timeout();
              })
              .catch((err) => {
                Modal.alert(err.data, 'error');
                loading.value = false;
              });
          })
          .catch(() => {});
      };
      // 倒计时
      const times = ref(60);
      let timer = null;
      const timeout = () => {
        timer = setInterval(() => {
          times.value--;
          if (times.value <= 0) {
            clearInterval(timer);
            times.value = 60;
          }
        }, 1000);
      };

      // 取消
      const cancel = () => {
        props.selfModel.close();
      };

      return {
        editor: editorRef,
        modelRef,
        validateInfos,
        selectList,
        times,
        formRef,
        btnDisabled,
        loading,
        onSubmit,
        sendNote,
        cancel,
      };
    },
  });
</script>

<style lang="less" scoped>
  .je-issue {
    position: relative;
    background: #fff;
    padding-bottom: 39px;
    // .footer {
    //   margin-top: 30px;
    //   height: 60px;
    //   display: flex;
    //   justify-content: center;
    // }
    .footer {
      position: fixed;
      width: 1200px;
      left: 50%;
      transform: translateX(-50%);
      bottom: 50px;
      background: #fff;
      height: 59px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 99;
    }
    .my-input {
      width: 400px;
    }
    .first-line,
    .second-line {
      position: relative;
    }
    .tail {
      position: absolute;
      top: 0;
      left: 525px;
    }
    .btn {
      position: absolute;
      top: 0;
      right: 0px;
      z-index: 99;
    }
    .times {
      position: absolute;
      top: 4px;
      font-size: 16px;
      right: 30px;
      z-index: 99;
    }
  }
</style>
